<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('启用节点筛选')}`">{{ $t('启用节点筛选') }}</t>
            <li>
                配置<span class="d-code">filterable</span>即可启用节点筛选
            </li>
            <li>
                注意：在未配置<span class="d-code">filter-by-front</span>为
                <span class="s-code">false</span>的情况下，组件内部的筛选均为前台筛选<span class="s-code">(前台根据节点名称模糊匹配)</span>。
                你也可以使用<span class="d-code">filter-node-method</span>来自定义前台筛选节点的方法
            </li>
        </template>
        <sib-tree
            node-key="myid"
            filterable
            :props="props"
            :data="treeData"
            style="height: 300px;">
        </sib-tree>
    </example>
</template>

<script>

export default {
    setup() {
        return {
            props: {
                children: 'mychildren',
                label: 'myname',
                disabled: 'mydisabled',
            },
            treeData: [
                {
                    myid: 1,
                    myname: 'IT研发部',
                    mychildren: [
                        {
                            myid: 11,
                            myname: '前端组',
                            mychildren: [
                                {
                                    myid: 111,
                                    myname: 'bearsee',
                                },
                                {
                                    myid: 112,
                                    myname: '摸鱼张三',
                                },
                                {
                                    myid: 113,
                                    myname: '带薪拉屎老王',
                                    mydisabled: true,
                                },
                            ],
                        },
                        {
                            myid: 12,
                            myname: '后端组',
                            mychildren: [
                                {
                                    myid: 121,
                                    myname: '三炮',
                                },
                                {
                                    myid: 122,
                                    myname: '飞天老李',
                                },
                            ],
                        },
                    ],
                },
            ],
            templateString: `<template>
    <div class="example-box">
        <sib-tree
            node-key="myid"
            filterable
            :props="props"
            :data="treeData"
            style="height: 300px;">
        </sib-tree>
    </div>
</template>

<script>

export default {
    setup() {
        return {
            props: {
                children: 'mychildren',
                label: 'myname',
                disabled: 'mydisabled',
            },
            treeData: [
                {
                    myid: 1,
                    myname: 'IT研发部',
                    mychildren: [
                        {
                            myid: 11,
                            myname: '前端组',
                            mychildren: [
                                {
                                    myid: 111,
                                    myname: 'bearsee',
                                },
                                {
                                    myid: 112,
                                    myname: '摸鱼张三',
                                },
                                {
                                    myid: 113,
                                    myname: '带薪拉屎老王',
                                    mydisabled: true,
                                },
                            ],
                        },
                        {
                            myid: 12,
                            myname: '后端组',
                            mychildren: [
                                {
                                    myid: 121,
                                    myname: '三炮',
                                },
                                {
                                    myid: 122,
                                    myname: '飞天老李',
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    },
};
<\/script>`,
        };
    },
};
</script>
